<template>
  <div class="loginContainer">
    <div class="topContainer">
      <!-- 跳到首页 -->
      <a href="/" class="home">
        <van-icon name="wap-home-o" size="34" color="#333" />
      </a>
      <a href="/" class="logo">网易严选</a>
      <!-- 跳转到搜索页 -->
      <a href="/search" class="search">
        <van-icon name="search" size="34" color="#333" />
      </a>
      <!-- 跳转到购物车 -->
      <a href="/cart" class="shopCar">
        <van-icon name="shopping-cart-o" size="34" color="#333" />
      </a>
    </div>
    <div class="centerContainer">
      <div class="wytext"><img src="../../../assets/logo.png" alt="" /></div>
      <div class="anniu">
        <div class="phlogin">
          <van-button icon="graphic" type="danger" size="large" @click="toEnter"
            >手机号快捷登录</van-button
          >
        </div>
        <div class="emlogin">
          <van-button
            plain
            type="danger"
            size="large"
            icon="envelop-o"
            @click="toEmail"
            >邮箱账号登录</van-button
          >
        </div>
      </div>
      <div class="loginStyle">
        <div class="wx"><van-icon name="wechat" />微信</div>
        <p>|</p>
        <div class="qq"><van-icon name="qq" />QQ</div>
        <p>|</p>
        <div class="wb"><van-icon name="weibo" />微博</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const toEnter = () => {
  router.push({ name: "Enter" });
};
const toEmail = () => {
  router.push({ name: "Email" });
};

</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
.loginContainer {
  height: 100%;
}
.topContainer {
  width: 100%;
  height: 47px;
  background-color: #fafafa;
  line-height: 47px;
  .topCenter {
    width: 400px;
    height: 47px;
    line-height: 55px;
  }
  .home {
    margin-left: 10px;
  }
  .logo {
    font-size: 20px;
    color: #333;
    margin-left: 100px;
    margin-right: 55px;
    font-weight: 700;
  }
  .search {
    margin-right: 25px;
  }
}
.centerContainer {
  background: #f2f5f4;
  height: 100%;
  .wytext {
    text-align: center;
    padding-top: 1.6rem;
    img {
      width: 3.8rem;
      height: 1.3rem;
    }
  }
  .anniu {
    margin: 2.5rem 0.5rem;
    .emlogin {
      margin-top: 0.5rem;
    }
  }
  .loginStyle {
    display: flex;
    justify-content: space-around;
  }
}
</style>
